<template>
  <div class="s-center">
    <div class="s-monitor" title="智慧车间" @click="handleRouter" />
    <div
      v-for="(item, k) in dataList"
      :key="k"
      :id="'area' + k"
      :title="item.name"
      class="s-area"
      :style="{
        left: item.left + 'px',
        top: item.top + 'px',
        opacity: item.show ? 1 : 0,
      }"
    >
      <div class="s-area-label">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [],
      currentIndex: 0,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.dataList = [
        { name: "科研楼", left: 416, top: 216 },
        { name: "A区", left: 650, top: 200 },
        { name: "B区", left: 560, top: 330 },
        { name: "C区", left: 260, top: 320 },
        { name: "D区", left: 206, top: 180 },
        { name: "E区", left: 440, top: 116 },
        { name: "环保中心", left: 740, top: 450 },
        { name: "餐厅", left: 10, top: 90 },
        { name: "寝室", left: 134, top: 56 },
      ];
      // 样式一
      // setTimeout(() => {
      //   this.dataList.forEach((item, k) => {
      //     let pid = document.getElementById("area" + k);
      //     pid.style.animation = `flash 5s infinite`;
      //     pid.style.animationDelay = Math.random() + "s";
      //   });
      // }, 100);

      // 样式二
      // setTimeout(() => {
      //   this.startAnimation(3);
      // }, 0);

      // 样式三
      setTimeout(() => {
        this.showAreas(2);
      }, 2000);
    },
    // 开始动画
    async startAnimation(s) {
      while (true) {
        for (let k = 0; k < this.dataList.length; k++) {
          let pid = document.getElementById("area" + k);
          pid.style.animation = `flash ${s}s`;
          await this.delay(s);
          pid.style.animation = "";
        }
      }
    },
    // 延迟
    async delay(ms) {
      return new Promise((resolve) => setTimeout(resolve, ms * 1000));
    },
    // 样式三显示效果
    showAreas(second = 3) {
      if (this.currentIndex < this.dataList.length) {
        this.$set(this.dataList, this.currentIndex, {
          ...this.dataList[this.currentIndex],
          show: true,
        });
        setTimeout(() => {
          this.currentIndex++;
          this.showAreas(second);
        }, second * 1000);
      } else {
        this.currentIndex = 0;
        this.dataList.forEach((item) => {
          item.show = false;
        });
        setTimeout(() => {
          this.showAreas(second);
        }, second * 1000);
      }
    },
    // 跳转
    handleRouter() {
      this.$router.push({ path: "/srceen/monitor" });
    },
  },
};
</script>
<style lang="scss" scoped>
.s-center {
  background: url("../../../../assets/home/srceen-center-bg.png") no-repeat;
  background-size: 100% 100%;
  width: 904px;
  height: 656px;
  position: relative;
  .s-monitor {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 35px;
    height: 35px;
    background: url("../../../../assets/home/screen-center-monitor.png") no-repeat;
    background-size: 100% 100%;
    &:hover {
      cursor: pointer;
      opacity: 0.9;
    }
  }
  .s-area {
    position: absolute;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 24px;
    color: #fff;
    letter-spacing: 1px;
    background: url("../../../../assets/home/screen-center-one.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    min-width: 121px;
    height: 100px;
    opacity: 0;
    transition: all 2s;
    &-label {
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
<style>
@keyframes flash {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>
